<!DOCTYPE html>
<html>
<head>
    <title>维修记录单</title>
    #parse("sys/header.html")
    <style>
        .contentBlock {
            height: 200vh;
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
    <div>
        <Row :gutter="16" style="margin: 8px 0px 0px 1px">
            <div class="search-group">
                <i-col span="3">
                    <i-input v-model="q.name" @on-enter="query" placeholder="设备名称"></i-input>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.spareName" @on-enter="query" placeholder="备件名称"></i-input>
                </i-col>
                <i-col span="3">
                    <i-input v-model="q.spareSpec" @on-enter="query" placeholder="备件规格"></i-input>
                </i-col>
                <i-col span="3">
                    <Date-picker type="date" v-model="q.beginTime" placeholder="报修开始时间"></Date-picker>
                </i-col>
                <i-col span="3">
                    <Date-picker type="date" v-model="q.endTime" placeholder="报修结束时间"></Date-picker>
                </i-col>
                <i-button @click="query">查询</i-button>
                <i-button @click="reloadSearch">重置</i-button>
            </div>
        </Row>
        <Row :gutter="16" class-name="contentBlock">
            <i-col span="3">
                <p class="text-center" style="font-size: 15px;">故障类型</p>
                <div id="storeLayer">
                    <ul id="faultTree" class="ztree"></ul>
                </div>
            </i-col>
            <i-col span="21">
                <table id="jqGrid"></table>
            </i-col>
        </Row>
    </div>
    <!-- 选择故障类型-->
    <div id="faultTypeLayer" style="display: none;padding:10px;">
        <ul id="faultTypeTree" class="ztree"></ul>
    </div>
</div>
<style>
    .from_tab_wide {
        width: 100% !important;
        padding-top: 1% !important;
    }
</style>
<script>
    $(function () {
        vm.getFaultTree();
        $("#jqGrid").Grid({
            url: '../devmaintenrepair/list',
            colModel: [
                {label: '设备名称', name: 'devName', index: 'DEV_NAME', width: 120},
                {label: '维修人', name: 'repairUsername', index: 'REPAIR_USER', width: 80},
                {label: '故障代码', name: 'faultCode', index: 'FAULT_CODE', width: 80},
                {label: '故障类型', name: 'typeName', index: 'TYPE_NAME', width: 80},
                {label: '故障时长（分钟）', name: 'faultNum', index: 'FAULT_NUM', width: 80},
                {label: 'id', name: 'id', index: 'ID', key: true, hidden: true}
            ]
        });
    });
    //定义树
    var faultTree;
    //定义树
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "typePid",
                rootPId: 0
            },
            key: {
                url: "nourl",
                name: "typeName" //name 与 typeName 绑定
            },
        },
        callback: {
            onClick: function () {
                let node = faultTree.getSelectedNodes();
                if(node[0].typePid != '0'){
                    vm.q.type = node[0].id;
                    vm.query()
                }
            }
        }
    };
    var faultTree2;
    var setting2 = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "typePid",
                rootPId: 0
            },
            key: {
                url: "nourl",
                name: "typeName" //name 与 typeName 绑定
            }
        }
    };
    var vm = new Vue({
        el: '#rrapp',
        data: {
            title: null,
            typeName:"",
            q: {
                name: '', // 设备名称
                spareName:'', // 备件名称
                spareSpec: '', // 备件规格
                type:'', // 故障类型
                beginTime: '',
                endTime: '',
            },
            replaceSpareListCols: [
                {title:'备件编码',key:'spareCode'},
                {title:'名称',key:'name'},
                {title:'规格',key:'spec'},
                {title:'更换数目',key:'num'}
            ],
            replaceSpareList:[]
        },
        methods: {
            getDeviceInfo: function () {
                openWindow({
                    type: 2,
                    title: '<i class="fa fa-file-text-o"></i> 选择设备',
                    content: '../sys/deviceInfoSelect.html',
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var iframeWin = window["layui-layer-iframe" + index];
                        var res = iframeWin.getDeviceInfo();
                        if (!res) {
                            iview.Message.error("请选择一条记录");
                        } else {
                            vm.devMaintenRepair.devCode = res.devCode;
                            vm.devMaintenRepair.devName = res.devName;
                            vm.devMaintenRepair.devId = res.id;
                            layer.close(index);
                        }
                    }
                })
            },
            query: function () {
                vm.reload();
            },
            getFaultTree: function(){
                //加载故障类型树
                Ajax.request({
                    url: "../faulttype/select?category=1",
                    async: true,
                    successCallback: function (r) {
                        var tree = r.faultList;
                        faultTree = $.fn.zTree.init($("#faultTree"), setting, tree);
                    }
                });
            },
            getFaultTypeTree: function () {
                //加载故障类型树
                Ajax.request({
                    url: "../faulttype/select?category=1",
                    async: true,
                    successCallback: function (r) {
                        var tree = r.faultList;
                        faultTree2 = $.fn.zTree.init($("#faultTypeTree"), setting2, tree);
                    }
                });
            },
            typeTree: function () {
                openWindow({
                    title: "选择故障类型",
                    area: ['300px', '450px'],
                    content: jQuery("#faultTypeLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = faultTree2.getSelectedNodes();
                        //选择上级部门
                        vm.devMaintenRepair.type = node[0].id;
                        vm.devMaintenRepair.faultCode = node[0].faultCode;
                        vm.devMaintenRepair.typeName = node[0].typeName;

                        layer.close(index);
                    }
                });
            },
            reload: function (event) {
                if(this.q.beginTime){
                    this.q.beginTime = gmt2DateStr(this.q.beginTime);
                }
                if(this.q.endTime){
                    this.q.endTime = gmt2DateStr(this.q.endTime);
                }
                var page = $("#jqGrid").jqGrid('getGridParam', 'page');
                $("#jqGrid").jqGrid('setGridParam', {
                    postData: this.q,
                    page: page
                }).trigger("reloadGrid");
                vm.handleReset('formValidate');
            },
            reloadSearch: function () {
                this.q = {
                    name: '', // 设备名称
                    spareName:'', // 备件名称
                    spareSpec: '', // 备件规格
                    type:'', // 故障类型
                    beginTime: '',
                    endTime: '',
                };
                this.reload();
            }
        }
    });
    var getRepairRecord = function () {
        let result = getSelectedRowData("#jqGrid");
        var id = result.id;
        if (id == null) {
            return false;
        } else {
            return result;
        }
    }
</script>
</body>
</html>
